<template>
  <BasicModal
    v-bind="$attrs"
    @ok="handleSubmint"
    okText="提交"
    :showOkBtn="props.info.type !== 'look'"
    :showCancelBtn="props.info.type !== 'look'"
    @register="register"
    :title="modalTitle"
    @visible-change="handleVisibleChange"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm">
        <template #slotVariable="{ model, field }">
          <checkTag
            :diabled="props.info.type === 'look'"
            :value="model[field]"
            :isErroByVariable="isErroByVariable"
            @checkTag="handleCheckTag"
          />
        </template>
      </BasicForm>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModal } from '/@/components/Modal';
  import { computed, nextTick, toRef, ref } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import checkTag from '/@/components/selectTag/index.vue';
  import { getFormErrorMessage } from '/@/utils/index';

  const props = defineProps({
    info: {
      type: Object,
      default: () => {},
    },
    modalOptions: {
      type: Array,
      default: () => [],
    },
    sendOptions: {
      type: Array,
      default: () => [],
    },
    qosOptions: {
      type: Array,
      default: () => [],
    },
    schemasProps: {
      type: Array,
      default: () => [],
    },
  });
  let isErroByVariable = ref<boolean>(false);
  let modalTitle = computed(() => {
    return `${props.info.type === 'add' ? '新增' : props.info.type === 'update' ? '编辑' : '查看'}`;
  });
  // 表单内容
  let schemasPro: FormSchema[] = props.schemasProps as FormSchema[];

  const [
    registerForm,
    { validateFields, updateSchema, setFieldsValue, resetFields, clearValidate, setProps },
  ] = useForm({
    labelWidth: 120,
    schemas: schemasPro,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  });

  const emit = defineEmits(['handleSubmit']);
  const [register] = useModal();

  function handleCheckTag(val) {
    let resList = val.val;
    setFieldsValue({
      variable: Array.isArray(resList) && resList.length > 0 ? resList[0].FullName : '',
    });
    isErroByVariable.value = false;
  }
  async function handleSubmint() {
    try {
      let res = await validateFields();
      emit('handleSubmit', res);
    } catch (error: any) {
      if (['', null, undefined].indexOf(error.values.variable) >= 0) isErroByVariable.value = true;
      console.log('not passing', error);
      getFormErrorMessage(error);
    }
  }
  function handleVisibleChange(visible) {
    if (visible) {
      nextTick(() => {
        updateSchema([
          {
            field: 'method',
            componentProps: {
              options: props.sendOptions,
            },
          },

          {
            field: 'qos',
            componentProps: {
              options: props.qosOptions,
            },
          },
          {
            field: 'mode',
            componentProps: {
              options: props.modalOptions,
            },
          },
        ]);
        if (props.info.type !== 'add') {
          let data = toRef(props.info, 'data');
          setFieldsValue(data.value);
          if (props.info.type === 'look') {
            nextTick(() => {
              setProps({ disabled: true });
              clearValidate();
            });
          }
        } else {
          clearValidate();
        }
      });
    } else {
      isErroByVariable.value = false;
      resetFields();
      setProps({ disabled: false });
    }
  }
</script>

<style lang="less" scoped>
  .slot-select {
    width: 100%;
    height: 32px;
    padding: 0 11px;
    display: flex;
    position: relative;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
  }

  .slot-select:hover {
    border: 1px solid #1e80ff;
  }

  .slot-select-con {
    margin-right: 18px;
    line-height: 30px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000000d9;
    font-size: 14px;
  }

  .con-placeholder {
    color: #bfbfbf;
  }

  .icon-style {
    line-height: 30px;
    font-size: 11px;

    color: #bfbfbf;
  }

  .erro-style {
    border: 1px solid #ed6f6f !important;
  }

  .slot-select-diabled {
    background: #f5f5f5;
    cursor: not-allowed;

    .slot-select-con {
      color: rgba(0, 0, 0, 0.25);
    }
  }

  .slot-select-diabled:hover {
    border: 1px solid #d9d9d9;
  }
</style>
